// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '@/store';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('../views/index.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: {
          breadcrumb: '首页'
        }
      },
      {
        path: 'catatopt',    // 领养列表页
        name: 'catatopt',
        component: () => import('../views/CatAtopt/index.vue'),
        meta: {
          breadcrumb: '猫咪收养'
        }
      },
      {
        path: 'catatopt/detail/:id?',   // 领养详情
        name: 'catatoptDetail',
        component: () => import('../views/CatAtopt/CatDetail.vue'),
        meta: {
          breadcrumb: '猫咪详情'
        }
      },
      {
        path: 'catatopt/detail/catadoptinfo/:id?',   // 领养信息填写
        name: 'catadoptInfo',
        component: () => import('../views/CatAtopt/CatAdoptInfo.vue'),
        meta: {
          breadcrumb: '领养信息填写'
        }
      },
      
      {
        path: 'products',   // 商品列表页
        name: 'products',
        component: () => import('../views/Products/index.vue'),
        meta: {
          breadcrumb: '商品挑选'
        }
      },
      {
        path: 'products/detail/:id?',   // 商品详情页面
        name: 'productsDetail',
        component: () => import('../views/Products/ProductsDetail.vue'),
        meta: { 
          breadcrumb: '商品详情'
        }
      },
      {
        path: 'shoppingcart',   // 购物车页面
        name: 'shoppingCart',
        component: () => import('../views/Products/ShoppingCart.vue'),
        meta: { 
          breadcrumb: '购物车'
        }
      },
      {
        path: 'createorder',   // 生成订单页面
        name: 'createOrder',
        component: () => import('../views/Products/CreateOrder.vue'),
        meta: { 
          breadcrumb: '创建订单'
        }
      },

      {
        path: 'dogatopt',   // 领养狗狗模块
        name: 'dogatopt',
        component: () => import('../views/DogAtopt/index.vue'),
        meta: { 
          breadcrumb: '狗狗领养'
        }
      },
      {
        path: 'informationentry',   // 信息录入
        name: 'informationEntry',
        component: () => import('../views/InformationEntry/index.vue'),
        meta: { 
          breadcrumb: '信息录入'
        }
      },
      {
        path: 'SettingInfo',   // 信息录入
        name: 'SettingInfo',
        component: () => import('../views/SettingInfo/index.vue'),
        meta: { 
          breadcrumb: '个人信息页'
        }
      },
      // {
      //   path: '/catatopt/detail',
      //   name: 'catatoptDetail',
      //   component: () => import('../views/CatAtopt/CatDetail.vue'),
      //   meta: {
      //     breadcrumb: '猫咪详情'
      //   }
      // },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: { 
      breadcrumb: '登录'
    }
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    meta: { 
      breadcrumb: '注册页面'
    }
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {
  // 开始加载状态
  store.dispatch('startLoading');

  // 继续导航
  next();
});

router.afterEach(() => {
  // 这里可以设置一个短暂的延迟来模拟loading效果，或者直接结束loading
  setTimeout(() => {
    store.dispatch('endLoading');
  }, 300); // 可选的延迟时间
});
export default router;